<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  用户名：<input type="text" class="un"><br>
  密码：<input type="text" class="pw"><br>
  <input type="checkbox" class="remeber">记住账号密码
  <input type="button" class="login" value="登录">
</body>
<script>
  
  class Remeber{
    constructor(){
      this.un = document.querySelector(".un")
      this.pw = document.querySelector(".pw")
      this.remeber = document.querySelector(".remeber")
      this.login = document.querySelector(".login")
      // 立即获取数据，并设置到输入框
      this.getData();

      this.addEvent()
    }
    getData(){
      // 读取本地存储中的用户信息，并设置到输入框
      this.un.value = localStorage.getItem("username") || "";
      this.pw.value = localStorage.getItem("password") || "";
    }
    addEvent(){
      const that = this;
      this.login.onclick = function(){
        if( that.remeber.checked ){
          that.localData()
        }
      }
    }
    localData(){
      // 将用户信息存储到本地存储中
      localStorage.setItem("username", this.un.value)
      localStorage.setItem("password", this.pw.value)
    }
  }

  new Remeber();

</script>
</html>